<template>
	<div class="chats">
		<div class="top flex-b-c">
			<p><span>SQ</span>.web3</p>
			<div class="flex-e-c">
				<div class="money" @click="linkToProfile">0.01 ETH</div>
				<div class="head" @click="linkToAccount">
					<img src="/images/9.jpg" alt="" />
				</div>
			</div>
		</div>
		<div class="chats-list">
			<div class="list-head flex-b-c">
				<div class="flex-s-c">
					<p style="margin-right: 10px">Rooms</p>
					<el-icon size="22" color="#999999">
						<Refresh />
					</el-icon>
				</div>
			</div>
			<div class="item flex-b-c">
				<div class="left flex-s-c">
					<img src="/images/4.jpg" alt="" @click="linkToMessage(4, 'Jacksonwun')" />
					<p>Jacksonwun</p>
				</div>
				<div class="right">
					<p>0.002ETH</p>
					<p>$3.62</p>
				</div>
			</div>
			<div class="item flex-b-c">
				<div class="left flex-s-c">
					<img src="/images/2.jpg" alt="" @click="linkToMessage(2, 'Asaaa')" />
					<p>Asaaa</p>
				</div>
				<div class="right">
					<p>13.5ETH</p>
					<p>$959.62</p>
				</div>
			</div>
			<div class="item flex-b-c">
				<div class="left flex-s-c">
					<img src="/images/3.jpg" alt="" @click="linkToMessage(3, 'Json')" />
					<p>Json</p>
				</div>
				<div class="right">
					<p>0.012ETH</p>
					<p>$18.92</p>
				</div>
			</div>
			<div class="item flex-b-c">
				<div class="left flex-s-c">
					<img src="/images/6.jpg" alt="" @click="linkToMessage(6, 'CBBOFEE')" />
					<p>CBBOFEE</p>
				</div>
				<div class="right">
					<p>0.2ETH</p>
					<p>$188.62</p>
				</div>
			</div>
			<div class="item flex-b-c">
				<div class="left flex-s-c">
					<img src="/images/1.jpg" alt="" @click="linkToMessage(1, 'SAAPDAS')" />
					<p>SAAPDAS</p>
				</div>
				<div class="right">
					<p>1.233ETH</p>
					<p>$95.62</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { Refresh } from "@element-plus/icons";
import { useRouter } from "vue-router";

const router = useRouter();

const linkToProfile = () => {
	router.push("/profile");
};

const linkToMessage = (image, name) => {
	localStorage.setItem("message", JSON.stringify({ image, name }));
	router.push("/message");
};

const linkToAccount = () => {
	router.push("/account");
};
</script>

<style scoped lang="scss">
.chats {
	.top {
		border-bottom: 1px solid #d3d3d3;
		padding-bottom: 40px;
		font-size: 24px;

		span {
			color: #00b9f4;
		}

		.money {
			height: 40px;
			font-size: 16px;
			color: #666666;
			padding: 0 14px;
			border-radius: 20px;
			border: 1px solid #d3d3d3;
			line-height: 40px;
		}

		.head {
			margin-left: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
			}
		}
	}

	.chats-list {
		padding-top: 40px;

		.list-head {
			padding-bottom: 30px;
		}

		.item {
			margin-bottom: 20px;

			img {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				margin-right: 10px;
				background: #efefef;
			}

			.right {
				p {
					font-size: 16px;
					color: #333333;
				}

				p:last-child {
					font-size: 12px;
					text-align: right;
					padding-top: 10px;
					color: #999999;
				}
			}
		}
	}
}
</style>
